<template>
	<div class="app-container">
		<el-form ref="form" :model="form"  :rules="DataFillingRules" label-width="140px">

			<div class="centered-form">
				<el-form-item label="建档期就业人数" >
					<div style="display: flex; align-items: center;">

						<span class="demonstration"></span>
						<el-input class="long_input" v-model="form.p_number1" placeholder="" :disabled=true />
						<span style="color: red; font-size: 1.7em; margin-left: 0.55em;"></span>

					</div>
				</el-form-item>
			</div>


			<div class="centered-form">
				<el-form-item label="调查期就业人数"  prop="_p_number2">
					<div style="display: flex; align-items: center;">

						<span class="demonstration"></span>
						<el-input class="long_input" v-model="form.p_number2" placeholder="请输入"  @input="checkEmploymentNumbers" />
						<span style="color: red; font-size: 1.7em; margin-left: 0.1em;">*</span>

					</div>
				</el-form-item>
			</div>


			<div class="centered-form">
				<el-form-item label="就业人数减少类型" v-if="showReasonFields1" prop="_reduction_type">
					<div style="display: flex; align-items: center;">

						<span class="demonstration"></span>
						<el-cascader
							placeholder="请选择"
							class="long_input"
							v-model="form.reduction_type"
							:options="form.reduction_type_options"
							>
						</el-cascader>
						<span style="color: red; font-size: 1.7em; margin-left: 0.1em;">*</span>

					</div>
				</el-form-item>
			</div>



			<div class="centered-form">
				<el-form-item label="主要原因" v-if="showReasonFields1" prop="_main_reason">
					<div style="display: flex; align-items: center;">

						<span class="demonstration"></span>
						<el-cascader
							placeholder="请选择"
							class="long_input"
							v-model="form.main_reason"
							:options="form.main_reason_options"
							@change="handleMainReasonChange" >
						</el-cascader>
						<span style="color: red; font-size: 1.7em; margin-left: 0.1em;">*</span>

					</div>
				</el-form-item>
			</div>


			<div class="centered-form">
				<el-form-item label="次要原因" v-if="showReasonFields2" prop="_second_reason">
					<div style="display: flex; align-items: center;">

						<span class="demonstration"></span>
						<el-cascader
							placeholder="请选择"
							class="long_input"
							v-model="form.second_reason"
							:options="form.second_reason_options[form.main_reason]"
							>
						</el-cascader>
						<span style="color: red; font-size: 1.7em; margin-left: 0.1em;">*</span>

					</div>
				</el-form-item>
			</div>


			<div class="centered-form">
				<el-form-item label="第三原因" v-if="showReasonFields2" prop="_third_reason">
					<div style="display: flex; align-items: center;">

						<span class="demonstration"></span>
						<el-input class="long_input" v-model="form.third_reason" placeholder="请输入" />
						<!-- <el-input
							class="long_input"
							type="textarea"
							:rows="3"
							placeholder="请输入内容"
							v-model="form.third_reason">
						</el-input> -->
						<span style="color: red; font-size: 1.7em; margin-left: 0.55em;"></span>

					</div>
				</el-form-item>
			</div>


			<div class="centered-form">
				<el-form-item label="原因说明" v-if="showReasonFields1" prop="_reason_describe">
					<div style="display: flex; align-items: center;">

						<span class="demonstration"></span>
						<!-- <el-input class="long_input" v-model="form.reason_describe" placeholder="请输入"  /> -->
						<el-input
							class="long_input"
							type="textarea"
							:rows="4"
							placeholder="请输入内容"
							v-model="form.reason_describe">
						</el-input>
						<span style="color: red; font-size: 1.7em; margin-left: 0.1em;">*</span>

					</div>
				</el-form-item>
			</div>




			<div class="centered-form2">
				<el-form-item>
					<el-button class="custom-button" @click="autoComplete" style="margin-right:150px;" :disabled="this.formStatus >= 6 || this.edited"> 自动填充为建档期数据 </el-button>
					<el-button class="custom-button" type="primary" @click.native.prevent="editForm" style="margin-right:150px;" :disabled="this.formStatus >= 6 || this.edited" >修改</el-button>
				</el-form-item>
			</div>

		</el-form>
	</div>
</template>

<script>

import {autoCompleteOneBlankEntry, editEnterpriseData} from "@/api/province/formEdit";
import Da from "element-ui/src/locale/lang/da";

export default {
	name: "editDialogForm",
	data() {
		const validateEmploymentNumbers = (rule, value, callback) => {
			const regex = /^[0-9]+$/; // 填写一个大于等于0的整数
			if (!regex.test(this.form.p_number2)) {
				callback(new Error('请填写一个大于等于0的整数'));
			} else {
				callback();
			}
		}

		const validateReductionType = (rule, value, callback) => {
			if(this.showReasonFields1 == true){
				if(!this.form.reduction_type){
					callback(new Error('人数减少类型不能为空'));
				} else{
					//console.log((this.form.reduction_type).length)
					if ((this.form.reduction_type).length < 1) {  // 检查字段是否为空或只包含空格
						callback(new Error('请选择内容'));
					} else {
						callback();
					}
					// console.log((this.form.reduction_type).length)
					if ((this.form.reduction_type).length < 1) {  // 检查字段是否为空或只包含空格
						callback(new Error('请选择内容'));
					} else {
						callback();
					}
				}
			}
		}

		const validateMainReason = (rule, value, callback) => {
			if(this.showReasonFields1 == true){
				if(!this.form.main_reason){
					callback(new Error('主要原因不能为空'));
				} else{
					if ((this.form.main_reason).length < 1) {  // 检查字段是否为空或只包含空格
						callback(new Error('请选择内容'));
					} else {
						callback();
					}
				}
			}
		}

		const validateSecondReason = (rule, value, callback) => {
			if(this.showReasonFields2 == true){
				if(!this.form.second_reason){
					callback(new Error('次要原因不能为空'));
				} else{
					if ((this.form.second_reason).length < 1) {  // 检查字段是否为空或只包含空格
						callback(new Error('请选择内容'));
					} else {
						callback();
					}
				}
			}
		}

		const validateReasonDescribe = (rule, value, callback) => {
			if(!this.form.reason_describe){
				callback(new Error('原因描述不能为空'));
			} else{
				if ((this.form.reason_describe).trim() == '') {  // 检查字段是否为空或只包含空格
					callback(new Error('请填写内容'));
				} else {
					callback();
				}
			}
		}

		return {
			is_Submit : 0,
			is_the_first_time:true,		// 是否是第一次填表

			showReasonFields1: false, // 是否显示填写主要原因的框
			showReasonFields2: false,
			isNumber1Get: false, // 是否建档期就业人数从数据库中获取到了
			labelPosition: 'right',
			companyCName: null,
			formStatus: null,
			edited: false,
			form: {
				p_number1: null,
				p_number2: null,

				reduction_type: [],
				reduction_type_options: [
					{
						value: '关闭破产',
						label: '关闭破产',
					},
					{
						value: '停业整顿',
						label: '停业整顿',
					},
					{
						value: '经济性裁员',
						label: '经济性裁员',
					},
					{
						value: '业务转移',
						label: '业务转移',
					},
					{
						value: '自然减员',
						label: '自然减员',
					},
					{
						value: '正常解除或终止劳动合同',
						label: '正常解除或终止劳动合同',
					},
					{
						value: '国际因素变化影响',
						label: '国际因素变化影响',
					},
					{
						value: '自然灾害',
						label: '自然灾害',
					},
					{
						value: '重大事件影响',
						label: '重大事件影响',
					},
					{
						value: '其他',
						label: '其他',
					},
				],


				main_reason: [],
				main_reason_options: [
					{
						value: '产业结构调整',
						label: '产业结构调整',
					},
					{
						value: '重大技术改革',
						label: '重大技术改革',
					},
					{
						value: '节能减排、淘汰落后产能',
						label: '节能减排、淘汰落后产能',
					},
					{
						value: '订单不足',
						label: '订单不足',
					},
					{
						value: '原材料涨价',
						label: '原材料涨价',
					},
					{
						value: '工资、社保',
						label: '工资、社保',
					},
					{
						value: '自然减员',
						label: '自然减员',
					},
					{
						value: '其他',
						label: '其他',
					},

					{
						value: '经营资金困难',
						label: '经营资金困难',
					},
					{
						value: '税收政策变化（包括税负增加或出口退税减少等）',
						label: '税收政策变化（包括税负增加或出口退税减少等）',
					},
					{
						value: '季节性用工',
						label: '季节性用工',
					},
					{
						value: '国际因素变化',
						label: '国际因素变化',
					},
					{
						value: '招不上人来',
						label: '招不上人来',
					},
					{
						value: '正常解除或终止劳动合同',
						label: '正常解除或终止劳动合同',
					},
				],


				second_reason: [],
				second_reason_options:{
					'自然减员':[
						{
							value: '退休',
							label: '退休',
						},
						{
							value: '死亡',
							label: '死亡',
						},
						{
							value: '退职',
							label: '退职',
						},
					],

					'其他':[
						{
							value: '自行离职',
							label: '自行离职',
						},
						{
							value: '工作调动',
							label: '工作调动',
						},
						{
							value: '劳动关系转移',
							label: '劳动关系转移',
						},
						{
							value: '招不上人来',
							label: '招不上人来',
						},
					],
				},

				third_reason: null,
				reason_describe: null,

				reduction_type1: null,
				main_reason1: null,
				second_reason1: null,
			},

			DataFillingRules: {
				_p_number2: [{ trigger: "change", validator: validateEmploymentNumbers }],
				_reduction_type: [{ trigger: "change", validator: validateReductionType }],
				_main_reason: [{ trigger: "change", validator: validateMainReason }],
				_second_reason: [{ trigger: "change", validator: validateSecondReason }],
				_reason_describe: [{ trigger: "change", validator: validateReasonDescribe }],
			},
		}	//return
	},


	created() {
		// 1. 在页面加载时获取数据库数据并填充form字段
		this.getData();
	},

	props: {
		entry: Object,
	},

	methods: {
		handleMainReasonChange() {
			if ((this.form.main_reason == "自然减员") || (this.form.main_reason == "其他")) {
				// console.log('主要原因已更改为:', this.form.main_reason);
				this.form.second_reason = ''; // 重置次要原因选择
				this.showReasonFields2 = true; // 显示次要原因字段
			} else {
				this.form.second_reason = ''; // 重置次要原因选择
				this.showReasonFields2 = false; // 隐藏次要原因字段
			}
		},

		checkEmploymentNumbers() {
			if(this.is_the_first_time == false){
				const pNumber1 = this.form.p_number1; // 建档期就业人数
				const pNumber2 = this.form.p_number2; // 调查期就业人数

				if (pNumber2 < pNumber1) {
					// 调查期就业人数少于建档期就业人数
					this.showReasonFields1 = true; // 设置显示主要原因框
					if((this.form.main_reason == "自然减员") || (this.form.main_reason == "其他")){
						this.showReasonFields2 = true; // 设置显示主要原因框
					}
				} else {
					// 调查期就业人数大于或等于建档期就业人数
					this.showReasonFields1 = false; // 设置隐藏主要原因框
					this.showReasonFields2 = false; // 设置隐藏主要原因框
				}
			} else {
				this.form.p_number1 = this.form.p_number2;
			}

		},

		// goBack() {
		// 	this.$emit('reload-page'); // 触发自定义事件
		// },

		getData() {
			// 读入表单填写过的内容以及上一次调查期的人数
			console.log(this.entry)
			this.form.p_number1 = this.entry.formStartTotalNum;
			this.form.p_number2 = this.entry.formEndTotalNum;
			this.is_the_first_time = this.form.p_number1 == null;
			this.formStatus = this.entry.formExamineStatus
			this.edited = false

			if(!this.entry.formDecreaseType) this.form.reduction_type = null;
			else this.form.reduction_type = (this.entry.formDecreaseType).split('/');
			if(!this.entry.formFirstReason) this.form.main_reason = null;
			else this.form.main_reason = (this.entry.formFirstReason).split('/');
			if(!this.entry.formSecondReason) this.form.second_reason = null;
			else this.form.second_reason = (this.entry.formSecondReason).split('/');
			this.form.third_reason = this.entry.formThirdReason;
			this.form.reason_describe = this.entry.formReasonDescription;
			this.companyCName = this.entry.companyChineseName;

			const pNumber1 = this.form.p_number1; // 建档期就业人数
			const pNumber2 = this.form.p_number2; // 调查期就业人数
			if(pNumber2 != null){
				if (pNumber2 < pNumber1) {
					// 调查期就业人数少于建档期就业人数
					this.showReasonFields1 = true; // 设置显示主要原因框

					if ((this.form.main_reason == "自然减员") || (this.form.main_reason == "其他")) {
						// console.log('主要原因已更改为:', this.form.main_reason);
						this.showReasonFields2 = true; // 显示次要原因字段
					} else if((this.form.main_reason).length() > 0){
						this.showReasonFields2 = false; // 隐藏次要原因字段
					}
				} else {
					// 调查期就业人数大于或等于建档期就业人数
					this.showReasonFields1 = false; // 设置隐藏主要原因框
					this.showReasonFields2 = false; // 设置隐藏主要原因框
				}


			}

			if((this.entry.formExamineStatus == 2) || (this.entry.formExamineStatus == 4) || (this.entry.formExamineStatus == 6) || (this.entry.formExamineStatus == 7)){
				this.is_Submit = 1;
			}
			else{
				this.is_Submit = 0;
			}
		},

		editForm(){
			this.$refs.form.validate(valid => {
				if (valid){
					editEnterpriseData({
						formId: this.entry.formID,
						investigationId: null,
						companyId: null,
						formStartTotalNum: this.form.p_number1,
						formEndTotalNum: this.form.p_number2,
						formDecreaseType: this.form.reduction_type[0],
						formFirstReason: this.form.main_reason1,
						formSecondReason: this.form.second_reason1,
						formThirdReason: this.form.third_reason,
						formReasonDescription: this.form.reason_describe,
						formExamineStatus: 6,
						formSubmitTime: Date().toString().replace(/\//g, '-')
					}).then(response =>{
						this.$message('已修改!')
						this.edited = true
					})
				}
				else{
					this.$message('数据不符合条件!')
				}
			})
		},

		autoComplete(){
			autoCompleteOneBlankEntry({
				companyId: this.entry.companyId,
				formId: this.entry.formID
			}).then(response =>{
				this.$message('已自动填充!')
				this.edited = true
			})
		},
	}
}
</script>

<style scoped>
.line {
	text-align: center;
}

.short_input {
	width: 510px; /* 自定义宽度 */
}


.long_input {
	width: 900px; /* 自定义宽度 */
}


.centered-form {
	display: flex;
	justify-content: center;
	align-items: center;
	/* height: 100vh;*/
}

.centered-form2 {
	display: flex;
	justify-content: center;
	align-items: center;
	/* height: 100vh; */
}

.custom-button {
	width: 200px; /* Custom width for the buttons */
}

.return-button {
	position: absolute;
	top: 10px;
	left: 10px;
}

.return-button a {
	text-decoration: none;
	background-color: #0074d9;
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	font-weight: bold;
	text-align: center;
}

.return-button a:hover {
	background-color: #0056b3;
}


</style>

